<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>意见反馈</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    
    <style type="text/css">
        body {
            font-size: 14px;
            background: #f3f3f3;
        }
        .contain{
            /*margin-top: 15px;*/
        }
        /*下面弹出的样式*/
        .pickerToTop{
            position: fixed;
            bottom: 0;
            -webkit-transform: translateY(188px);
            height:188px;
            overflow-y:auto; 
            -webkit-transition:  .5s;
            transition:  .5s;
            z-index: 999;
            width: 100%;
            text-align: center;
        }
        .toTopAnimate{
            -webkit-transform: translateY(00px);
        }
        .myBorder{
            height: 8px;
            background: #797979;
        }
        .tips{
            height: 35px;
            line-height: 35px;
            padding:0 15px;
            margin: 0;
        }
        .aui-list-view{
            margin: 0;
        }
        textarea{
            margin: 0;
            height: 150px;
            overflow-y: auto;
        }
        .sumRed{
            color:red;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="contain">
         <ul class="tips">
            <li>
                    问题类型
            </li>
         </ul>
         <ul class="aui-list-view">
            <li class="aui-list-view-cell" tapmode data-type="noCheck" onclick="showPicker(this)">
                <a class="aui-arrow-right problemType">
                    请选择您的反馈类型
                </a>
            </li>
         </ul>
         <ul class="tips">
            <li>
                    问题和意见
            </li>
         </ul>
         <ul class="aui-list-view">
            <li class="aui-list-view-cell">
                <textarea class="problemText" oninput="checkWord(this)" onpropertychange="checkWord(this)"   placeholder="请告诉我们您的意见和建议，帮助我们改进和提高"></textarea>
                <span class="aui-pull-right" style="color:#bbb;">
                    <em class="sum ">0</em>/200
                </span>
            </li>
         </ul>

     </div> 
     <div class="pickerToTop">
         
         <ul class="aui-list-view setOffer">
             <li class="aui-list-view-cell" data-type="format"   tapmode onclick="setType(this)">
                 问题反馈
             </li>
             <li class="aui-list-view-cell"  data-type="single"  tapmode onclick="setType(this)">
                 功能建议
             </li>
             <li class="aui-list-view-cell"  data-type="single"  tapmode onclick="setType(this)">
                 其它
             </li>

             <li class=" myBorder" >
                 
             </li>
             <li class="aui-list-view-cell "  tapmode onclick="hidePicker()">
                 取消
             </li>
         </ul>
     </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/myInfo.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/echo.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript" src="../../script/index.js"></script>
<script type="text/javascript">
    var firstH;//记录第一次自定义时候的高度，因为弹出键盘时候body高度变化了
    apiready = function () {
        api.parseTapmode();
    }
    
    // mui遮罩
    var mask = mui.createMask(hidePicker);
    // 显示遮罩
    function showPicker(obj){
        mask.show();
        //执行跨域execScript
        api.execScript({
            name:"my/sendProblem_win",
            script:'showMask()'
        })
        $(".pickerToTop").addClass("toTopAnimate");
    }
    // 关闭遮罩
    function hidePicker(){
        $(".pickerToTop").removeClass("toTopAnimate");
        mask.myclose();
        //执行跨域
        api.execScript({
            name:"my/sendProblem_win",
            script:'closeMask()'
        })
    }
    var hasCheckWord=false,hasChoose=false;
    //设置问题类型
    function setType(obj){
        hasChoose=true;
        $(".problemType").text($(obj).text());
        $(".problemType").attr({"data-type":"hasChecck"});
        hidePicker();
    }
    function checkWord(obj){
        var len=$(obj).val().length;
        $(".sum").text(len);
        var value=$(obj).val();
        if(len>=200){
            hasCheckWord=false;
            $(obj).val(value.substring(0,200));
            $(".sum").addClass("sumRed");
            api.toast({
                msg:"字数已超过200"
            })
        }else{
            hasCheckWord=true;
            $(".sum").removeClass("sumRed");
        }
    }
    function send() {
        if(hasCheckWord && hasChoose){
            //发送问题
//            $(".problemText").val("");
            api.toast({
                msg:"感谢您的反馈，我们已收到！"
            })
            setTimeout(function () {
                closeWin();
            },2000)
        }else if(!hasCheckWord){
            api.toast({
                msg:"请重新填写问题"
            })
        }else if(!hasChoose){
            api.toast({
                msg:"请选择问题类型"
            })
        }
    }
</script>
</html>